<template>
    <view :style="'margin-top: ' + config.marginTop * 2 + 'rpx;margin-bottom: ' + config.marginBottom * 2 + 'rpx; padding: 0 ' + config.marginLeftRight * 2 + 'rpx;'">
        <diy-navigator :url="config.link" @callback="callback">
            <view
                :style="
                    'background-color: ' +
                    config.bgColor +
                    ';padding: ' +
                    config.paddingTop * 2 +
                    'rpx ' +
                    config.paddingRight * 2 +
                    'rpx ' +
                    config.paddingBottom * 2 +
                    'rpx ' +
                    config.paddingLeft * 2 +
                    'rpx;height:' +
                    (config.autoHeight === 1 ? 'auto' : config.height * 2 + 'rpx') +
                    ';border-radius:' +
                    config.borderRadius * 2 +
                    'rpx;border-width: ' +
                    config.borderWidth * 2 +
                    'rpx;border-style: ' +
                    (config.borderStyle == 1 ? 'solid' : 'dashed') +
                    ';border-color: ' +
                    config.borderColor +
                    ';'
                "
                class="diy-wrap-container"
            >
                <view style="overflow: hidden">
                    <block v-for="(element, index) in componentData" :key="index">
                        <view :class="'phone-component ' + (element.sign == 'diy-btn' || element.sign == 'diy-word' ? 'phone-component-static' : '')">
                            <diy-btn v-if="element.sign == 'diy-btn'" :componentData="element" :wrap="1" @callback="callback"></diy-btn>

                            <diy-word v-if="element.sign == 'diy-word'" :componentData="element" :wrap="1" @callback="callback"></diy-word>

                            <diy-img v-if="element.sign == 'diy-img'" :componentData="element" @callback="callback"></diy-img>

                            <diy-wrap v-if="element.sign == 'diy-wrap'" :componentData="element.data.componentData" :config="element.data.config" @callback="callback"></diy-wrap>

                            <diy-doub-wrap
                                v-if="element.sign == 'diy-doub-wrap'"
                                :componentData="element.data.componentData"
                                :config="element.data.config"
                                @callback="callback"
                            ></diy-doub-wrap>
                        </view>
                    </block>
                </view>
            </view>
        </diy-navigator>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
import diyWrap from '../diy-wrap/diy-wrap';
import diyDoubWrap from '../diy-doub-wrap/diy-doub-wrap';
import diyImg from '../diy-img/diy-img';
import diyBtn from '../diy-btn/diy-btn';
import diyWord from '../diy-word/diy-word';
// plugin/components/diy-wrap.js
export default {
    components: {
        diyNavigator,
        diyWrap,
        diyDoubWrap,
        diyImg,
        diyBtn,
        diyWord
    },
    data() {
        return {
            element: {
                sign: '',

                data: {
                    componentData: '',
                    config: ''
                }
            }
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Array,
			default:[]
        },
        config: {
            type: Object
        },
        wrap: {
            type: Number,
            default: 0
        }
    },
    beforeMount() {},
    mounted() {
        // console.log('diy-wrap',this.data.componentData,this.data.config);
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        }
    }
};
</script>
<style>
@import './diy-wrap.css';
</style>
<style lang="scss" scoped>
	/* #ifdef MP-ALIPAY */
	.phone-component-static {
	    position: absolute !important;
		top: 0;
	}
	/* #endif */
</style>
